<script setup>
</script>

<template>
  <view id="background">
    <view id="h1">
      <view>
        请假流程
      </view>
      <view id="h1_1">
        <view id="decoration">
          <view id="smallCircle"></view>
          <view id="line"></view>
        </view>
        <view>
          <view id="firstPerson">
            <view id="personInformation">
              审批人(导师)
              <view id="name">
                张三
              </view>
            </view>
            <view id="surname">
              张
            </view>
          </view>
          <view id="line_1">
            会签-------------------------------1人通过即可进入下一节点
          </view>
          <view id="otherPerson">
            <view id="personInformation">
              审批人(导师)
              <view id="name">
                王五
              </view>
            </view>
            <view id="surname">
              王
            </view>
          </view>
        </view>
      </view>
      <view id="h1_1">
        <view id="decoration_2">
          <view id="smallCircle"></view>
          <view id="line_2"></view>
        </view>
        <view>
          <view id="otherPerson_2">
            <view id="personInformation">
              审批人(辅导员)
              <view id="name">
                沈秀兰
              </view>
            </view>
            <view id="surname">
              沈
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped>
#background{
  display: flex;
  padding: 10px;
  width: 345px;
  height: 430px;
  border-radius: 12px;
  box-shadow: 0 2px 4px #c8c7cc;
  justify-content: space-between;
}

#h1_1{
  display: flex;
}

#smallCircle{
  margin-top: 5px;
  margin-left: 10px;
  width: 6px;
  height: 6px;
  border-radius: 6px;
  background: #fff;
  border: 4px solid #2264ff;
}

#line{
  margin-left: 16px;
  margin-top: 5px;
  width: 0;
  height: 270px;
  background: transparent;
  border: 0.5px solid #2264ff;
}

#firstPerson{
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#name{
  font-family: "PingFang SC";
  font-weight: 400;
  font-size: 15px;
  text-align: left;
  color: #808080;
}

#surname{
  font-family: "PingFang SC Bold";
  color: #f8f8f8;
  width: 58px;
  height: 58px;
  border-radius: 58px;
  text-align: center;
  font-size: 35px;
  background: #2264ff;
}

#line_1{
  color: #8f939c;
  font-size: 13px;
}

#line_2{
  margin-left: 16px;
  margin-top: 5px;
  width: 0;
  height: 90px;
  background: transparent;
  border: 0.5px solid #2264ff;
}

#otherPerson{
  margin-top: 50px;
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#otherPerson_2{
  margin-top: -15px;
  margin-left: 10px;
  width: 300px;
  height: 80px;
  display: flex;
  justify-content: space-between;
}

#decoration_2{
  margin-top: -15px;
}
</style>